<template>
  <div>
    <div id="main" ref="main" style="width: 600px;height:400px;margin: 50px auto;"></div>
    <table class="chatTbl">
      <thead>
        <tr>
          <th>区域</th>
          <th>幼儿园</th>
          <th>小学</th>
          <th>中学</th>
          <th>高中</th>
          <th>大学</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="item in cityList">
          <td>{{item.cityName || '未知区域'}}</td>
          <td>{{item.schoolValue1 || 0}}</td>
          <td>{{item.schoolValue2 || 0}}</td>
          <td>{{item.schoolValue3 || 0}}</td>
          <td>{{item.schoolValue4 || 0}}</td>
          <td>{{item.schoolValue5 || 0}}</td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
  var echarts = require('echarts');
  import jinhuaJson from '@/const/jinhua.json'
  import {
    getStudentByArea
  } from '@/api/pvm/school'

  let NOWYEAR = new Date().getFullYear()

  export default {
    data() {
      return {
        cityList: [],
        list: [{
          cityCode: '001',
          cityName: '金东区',
          // info: [{
          //   schoolType: '0',schoolName: '幼儿园',value: '20',
          //   schoolType: '1',schoolName: '小学',value: '20',
          //   schoolType: '2',schoolName: '初中',value: '20',
          //   schoolType: '3',schoolName: '高中',value: '20',
          //   schoolType: '4',schoolName: '大学',value: '20'
          // }]
          schoolValue1: '10',
          schoolValue2: '20',
          schoolValue3: '30',
          schoolValue4: '40',
          schoolValue5: '50',
        }]

      }
    },
    created() {
      // this.$nextTick(() => {
      //   this.showChart()
      // })
      this.getData();
    },
    methods: {
      getData() {
        getStudentByArea().then(response => {
          if(response.data.code == '0'){
            this.cityList = response.data.data
            this.showChart()
          }else{
            this.$message.error(response.data.msg)
          }
        })
      },

      showChart() {
        let myChart = echarts.init(document.getElementById('main'))
        let data = this.cityList
        echarts.registerMap('jinhua', jinhuaJson);
        let option = {
          title: {
            text: NOWYEAR + '年金华市各行政区中小学生视力不良率',
            left: 'center',
            padding: [20, 5, 10, 5]
          },
          zoom: 0.5,
          tooltip: {
            trigger: 'item',
            showDelay: 0,
            transitionDuration: 0.2,
            formatter: function(params) {
              if(params.data){
                return params.data.cityName + '<br/>' + '幼儿园：' + params.data.schoolValue1+ '<br/>' + '小学：' + params.data.schoolValue2 + '<br/>' + '初中：' + params.data.schoolValue3 + '<br/>' + '高中：' + params.data.schoolValue4 + '<br/>' + '大学：' + params.data.schoolValue5
              }
              // return params.seriesName + '<br/>' + params.name + ': ' + params.value + '%';
              // if (params.name == '婺城区')
              //   return params.name + '<br/>' + "小学：65.28%" + "<br/>" + "初中：91.32%" + "<br/>" + "高中：97.75%";
              // if (params.name == '金东区')
              //   return params.name + '<br/>' + "小学：86.42%" + "<br/>" + "初中：98.59%" + "<br/>" + "高中：0%";
              // if (params.name == '兰溪市')
              //   return params.name + '<br/>' + "小学：91.38%" + "<br/>" + "初中：0%" + "<br/>" + "高中：0%";
              // if (params.name == '武义县')
              //   return params.name + '<br/>' + "小学：90.1%" + "<br/>" + "初中：0%" + "<br/>" + "高中：0%";
              // if (params.name == '义乌市')
              //   return params.name + '<br/>' + "小学：86.34%" + "<br/>" + "初中：0%" + "<br/>" + "高中：0%";

            }
          },
          visualMap: {
            left: 'right',
            itemHeight: 100,
            min: 20,
            max: 50,
            formatter: '{value}%',
            inRange: {
              color: ['#428ac8', '#7FFFAA  ', '#fee090', '#fdae61', '#f46d43', '#d73027', '#a50026']
            },
            text: ['高', '低'],
            calculable: true
          },
          series: [{
            name: '近视率',
            type: 'map',
            roam: true,
            map: 'jinhua',
            label: {
              //show: true,
              //formatter: '{b}:{c}%'
            },
            itemStyle: {},
            emphasis: {
              label: {
                show: true,
                color: '#fff',
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowColor: 'rgba(0, 0, 0, 0.5)',
                shadowBlur: 10,
                shadowOffsetX: 4,
                shadowOffsetY: 4,
              }
            },
            // 文本位置修正
            textFixed: {
              Alaska: [20, -20]
            },
            data: [
              {
                name: data[0].cityName,
                value: data[0].schoolValue1 || 0,
                cityName: data[0].cityName,
                schoolValue1: data[0].schoolValue1 || 0,
                schoolValue2: data[0].schoolValue2 || 0,
                schoolValue3: data[0].schoolValue3 || 0,
                schoolValue4: data[0].schoolValue4 || 0,
                schoolValue5: data[0].schoolValue5 || 0,
              },
              {
                name: data[1].cityName,
                value: data[1].schoolValue1 || 0,
                cityName: data[1].cityName,
                schoolValue1: data[1].schoolValue1 || 0,
                schoolValue2: data[1].schoolValue2 || 0,
                schoolValue3: data[1].schoolValue3 || 0,
                schoolValue4: data[1].schoolValue4 || 0,
                schoolValue5: data[1].schoolValue5 || 0,
              },
              {
                name: data[2].cityName,
                value: data[2].schoolValue1 || 0,
                cityName: data[2].cityName,
                schoolValue1: data[2].schoolValue1 || 0,
                schoolValue2: data[2].schoolValue2 || 0,
                schoolValue3: data[2].schoolValue3 || 0,
                schoolValue4: data[2].schoolValue4 || 0,
                schoolValue5: data[2].schoolValue5 || 0,
              },
              {
                name: data[3].cityName,
                value: data[3].schoolValue1 || 0,
                cityName: data[3].cityName,
                schoolValue1: data[3].schoolValue1 || 0,
                schoolValue2: data[3].schoolValue2 || 0,
                schoolValue3: data[3].schoolValue3 || 0,
                schoolValue4: data[3].schoolValue4 || 0,
                schoolValue5: data[3].schoolValue5 || 0,
              },
              {
                name: data[4].cityName,
                value: data[4].schoolValue1 || 0,
                cityName: data[4].cityName,
                schoolValue1: data[4].schoolValue1 || 0,
                schoolValue2: data[4].schoolValue2 || 0,
                schoolValue3: data[4].schoolValue3 || 0,
                schoolValue4: data[4].schoolValue4 || 0,
                schoolValue5: data[4].schoolValue5 || 0,
              },
              {
                name: data[5].cityName,
                value: data[5].schoolValue1 || 0,
                cityName: data[5].cityName,
                schoolValue1: data[5].schoolValue1 || 0,
                schoolValue2: data[5].schoolValue2 || 0,
                schoolValue3: data[5].schoolValue3 || 0,
                schoolValue4: data[5].schoolValue4 || 0,
                schoolValue5: data[5].schoolValue5 || 0,
              },
              {
                name: data[6].cityName,
                value: data[6].schoolValue1 || 0,
                cityName: data[6].cityName,
                schoolValue1: data[6].schoolValue1 || 0,
                schoolValue2: data[6].schoolValue2 || 0,
                schoolValue3: data[6].schoolValue3 || 0,
                schoolValue4: data[6].schoolValue4 || 0,
                schoolValue5: data[6].schoolValue5 || 0,
              },
              {
                name: data[7].cityName,
                value: data[7].schoolValue1 || 0,
                cityName: data[7].cityName,
                schoolValue1: data[7].schoolValue1 || 0,
                schoolValue2: data[7].schoolValue2 || 0,
                schoolValue3: data[7].schoolValue3 || 0,
                schoolValue4: data[7].schoolValue4 || 0,
                schoolValue5: data[7].schoolValue5 || 0,
              },
              {
                name: data[8].cityName,
                value: data[8].schoolValue1 || 0,
                cityName: data[8].cityName,
                schoolValue1: data[8].schoolValue1 || 0,
                schoolValue2: data[8].schoolValue2 || 0,
                schoolValue3: data[8].schoolValue3 || 0,
                schoolValue4: data[8].schoolValue4 || 0,
                schoolValue5: data[8].schoolValue5 || 0,
              }
            ]
          }]
        };
        myChart.setOption(option);
      }
    }
  }
</script>

<style scoped>
  .chatTbl {
    width: 600px;
    margin: 30px auto;
    text-align: center;
  }

  tr td,
  tr th {
    border: solid 1px #3b96f3;
  }
</style>
